<template>
  <div>
    <myheader></myheader>
    <br><br>
    <!-- 面包屑导航 -->
    <Breadcrumb :datas='datas'></Breadcrumb>
    <br><br>
    <br><br>

    <el-form ref="userform" :model='user'
             label-position="left"
             :rules="rules"
             label-width="80px">
      <el-form-item label="username:" prop="username">
        <el-input v-model="user.username"></el-input>
      </el-form-item>
      <el-form-item label="password:" prop="password">
        <el-input v-model="user.password" show-password></el-input>
      </el-form-item>
      <el-form-item prop=''>
        <dragVrify
          :width="width"
          :height="height"
          :text="text"
          ref="Verify">
        </dragVrify>
      </el-form-item>
      <el-button type="primary" @click="log">登录</el-button> &nbsp;&nbsp;
      <img style="cursor:pointer;" src='http://127.0.0.1:8000/static/sina.png' height="40" width="120" @click="sina">
      &nbsp;&nbsp;
      <img style="cursor:pointer;" src='http://127.0.0.1:8000/static/dingding.png' height="40" width="120"
           @click="dingding">

    </el-form>

    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br>
    <br><br><br>
    <myfooter></myfooter>

  </div>
</template>


<script>
  import myheader from './myheader.vue';
  import myfooter from './myfooter.vue';
  import axios from 'axios';
  import dragVerify from 'vue-drag-verify';
  import {config} from '../config.js'

  export default {
    data() {
      var checkPWD = (rule, value, callback) => {
        if (value == '') {
          return callback(new Error('请输入密码'))
        } else {
          if (value.length < 6) {
            return callback(new Error('密码不能少于6个字符'))
          } else {
            return callback();
          }
        }
      }
      return {
        //声明面包屑变量
        datas: [{title: '首页', route: {name: 'index'}}, {title: '登录页面'}],
        user: {
          "username": '',
          "password": '',
        },
        text: '请将滑块拖动到最右侧',
        width: 300,
        height: 40,
        djsrc: config['djurl'] + "static/sina.png",
        rules: {
          username: [
            {required: true, message: '请输入用户名', trigger: 'blur'},
            {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
          ],
          password: [
            {validator: checkPWD, trigger: 'blur'}
          ]
        }
      }
    },
    //注册组件标签
    components: {
      'myheader': myheader,
      'myfooter': myfooter,
      'dragVrify': dragVerify,
    },
    methods: {
      //新浪登录
      sina() {
        let url = "https://api.weibo.com/oauth2/authorize?client_id=1136699019&redirect_uri=http://127.0.0.1:8000/weibo";
        window.location.href = url;
      },
      dingding() {
        let url = 'https://oapi.dingtalk.com/connect/qrconnect?appid=dingoawcbhhfj9bdsvwprj&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://127.0.0.1:8000/dinding'
        window.location.href = url;
      },

      //登录按钮
      log() {
        //验证滑块是否拖动
        console.log(navigator.language);
        localStorage.setItem('language', navigator.language);
        console.log(this.$refs['Verify'].isPassing);
        if (this.$refs['Verify'].isPassing == false) {
          this.$Message('请拖动滑块')
        } else {
          axios.get(config['djurl'] + 'login/', {
            params: {
              username: this.user.username,
              password: this.user.password
            }
          }).then(res => {
            console.log(res);
            this.$Message(res.data.message)
            //跳转
            if (res.data.code == 200) {
              localStorage.setItem('username', res.data.username);
              localStorage.setItem('uid', res.data.uid);
              localStorage.setItem('jwt', res.data.jwt);
              localStorage.setItem('type', res.data.type);
              // 保存用户浏览器默认语言
              this.$router.push('/');
            }
          })
        }
      },
      reg() {
        this.$router.push({'name': 'register'})
      }
    }
  }
</script>
